<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
    position: relative;
    height: 320px;
    margin-top: 1rem;
    width: 100%;
}
.button {
    text-align: center;
}
.item {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    width: 222px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    z-index: 1;
    font-size: 74px;
    color: #fff;
}
.item-cur {
    z-index: 3;
}
.item-after-1 {
    -webkit-transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
    transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
    z-index: 2;
}
.item-before-1 {
    -webkit-transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
    transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
    z-index: 2;
}
.item-after-2 {
    -webkit-transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1);
    transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1);
}
.item-before-2 {
    -webkit-transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1);
    transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1);
}

  </style>
</head>
<body>
    <div class="content" index_cur="0">
        <div class="item item-cur" style="background-color: rgb(35, 21, 211);">
            1
        </div>
        <div class="item item-before-1" style="background-color: rgb(208, 235, 190);">
            2
        </div>
        <div class="item item-before-2" style="background-color: rgb(187, 111, 183);">
            3
        </div>
        <div class="item item-after-2" style="background-color: rgb(98, 220, 182);">
            4
        </div>
        <div class="item item-after-1" style="background-color: rgb(183, 31, 79);">
            5
        </div>
    </div>
    <div class="button">
        <button onclick="toChange('left')" class="left">向左</button>
        <button onclick="toChange('right')" class="right">向右</button>    
    </div>
</html>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    var toChange = function(type){
    var $content = $('.content'),
        index = parseInt( $content.attr('index_cur') ),
        $item = $('.content .item'),
        len = $item.length;
    //No.1
    //开始写代码，完成点击切换卡片按钮的响应事件，实现卡牌切换效果
    if(type == 'left'){
        index--;
        index < 0 && (index = len-1);
    }else{
        index++;
        index > 4 && (index = 0);     
    }
    // 如果index == 4, 
    $content.find('.item').eq(index).removeClass().addClass('item item-cur');
    //那么前两个0，1
    $content.find('.item').eq((index+1) % len).removeClass().addClass('item item-before-1');
    $content.find('.item').eq((index+2) % len).removeClass().addClass('item item-before-2');
    //后两个减 3， 2
    $content.find('.item').eq(index - 1 < 0 && len + (index-1) || index - 1 ).removeClass().addClass('item item-after-1');
    $content.find('.item').eq(index - 2 < 0 && len + (index-2) || index - 2).removeClass().addClass('item item-after-2');  
    $content.attr('index_cur', index)
}

  </script>
</body>
</html>